<template>
  <div class="sub-box">
    <header v-if="!title2">
      <p class="title">{{ title }}</p>
    </header>
    <header v-else class="header2">
      <p class="title">{{ title2 }}</p>
    </header>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "请输入标题",
    },
    title2: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  mounted() {},
  computed: {},
  methods: {},
};
</script>
<style scoped lang='scss'>
.sub-box {
  header {
    background: url("~@/assets/concreteScreen/sub_tt.png");
    height: vh(32px);
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: flex;
    .title {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: vh(18px);
      color: #dafdff;
      background: linear-gradient(180deg, #ffffff 0%, #71ebff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-left: vw(18px);
      margin: auto 0;
    }
    p {
      margin: 0;
    }
  }
  .header2 {
    width: vw(145px);
    height: vw(32px);
    background-size: 100% 100%;
  }
}
</style>
